<template>
	<view>
		<tt-bar leftIcon="icon-back" title="确认订单"></tt-bar>
		<view class="lissBox">
			<view class="listRow studentBox">
				<!-- <image src="@/pagesA/static/renyuan.png"></image> -->
				<!-- <view class="studentxinxi">
					<text style="float: left;" class="xinxi">学员信息</text>
					<text v-if="show_btn" style="float: right;" class="iconfont icon-right" data-url="memberList" data-select="1" @tap="toPage"></text>
				</view> -->
				<view class="studentxinxi studentxinxi1 studentxinxi2">
					<text class="xinxi">姓名：</text>
					<input class="in_btn" type="text" placeholder="请输入学员姓名" v-model="defaultMember[0].name" :disabled="disabled" />
					<text v-if="show_btn" style="float: right;" class="iconfont icon-right" data-url="memberList" data-select="1" @tap="toPage"></text>
				</view>

				<view class="studentxinxi studentxinxi1">
					<text class="xinxi">手机：</text>
					<input class="in_btn" type="text" placeholder="请输入手机号" v-model="defaultMember[0].phone || defaultMember[0].username" :disabled="disabled" />
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" :style="{ height: scHeight + 'px' }">
			<view class="carList">
				<block v-for="(item, index) in confirmList" :key="index">
					<view class="shopRow">
						<view class="titleBox">
							<text class="iconfont icon-shoucangdianjia"></text>
							<text class="shopName">{{ item.store ? item.store.name : item.storeName }}</text>
						</view>
						<confirmGood :shownewisGroup="shownewisGroup" :goodInfo="item" :coupon="couponSelect" :cpList="couponList"></confirmGood>
					</view>
				</block>
			</view>
		</scroll-view>
		<view class="btmOp">
			<view class="payTypeBox" v-if="!isZero">
				<view class="yyBox" @tap="seletType" data-type="0">
					<text class="iconfont" :class="[payType == 0 ? 'icon-yuanxingxuanzhongfill' : 'icon-yuanxingweixuanzhong']"></text>
					<text class="typeText">预约金支付:</text>
					<text class="price">￥{{ pricePre }}</text>
				</view>
				<view class="yyBox" @tap="seletType" data-type="1">
					<text class="iconfont" :class="[payType == 1 ? 'icon-yuanxingxuanzhongfill' : 'icon-yuanxingweixuanzhong']"></text>
					<text class="typeText">全款支付:</text>
					<text class="price">￥{{ priceAll }}</text>
				</view>
			</view>
			<view class="btnBox">
				<text>{{ payType == 0 ? '预约金合计' : '全款合计' }}：</text>
				<text class="pirceAll">￥{{ payType == 0 ? pricePre : priceAll }}</text>
				<button @tap="getpostOrder">确认订单</button>
			</view>
		</view>
		<selectCoupon v-if="couponList.length > 0" ref="sctCoupon" :couponList="couponList" :choseCoupon="couponSelect"></selectCoupon>
	</view>
</template>

<script>
import ttBar from '@/components/ttBar/ttBar.vue';
import confirmGood from '@/pagesA/components/confirmGood/confirmGood.vue';
import selectCoupon from '@/pagesA/components/selectCoupon/selectCoupon.vue';
import { mapState, mapGetters, mapMutation, mapActions } from 'vuex';
export default {
	components: {
		ttBar,
		confirmGood,
		selectCoupon
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			parentId: state => state.user.parentId
		})
	},
	data() {
		return {
			scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(426),
			goodInfo: null,
			payType: 0,
			priceAll: 0,
			pricePre: 0,
			memberInfo: null,
			confirmList: null,
			memberIndex: 0,
			defaultMember: [
				{
					name: '',
					username: ''
				}
			],
			acId: 0,
			isGroup: 0,
			isZero: false,
			isLm: false,
			zid: 0,
			couponList: [], //可用优惠券列表
			couponSelect: null, //已选中的优惠券
			actId: 0,
			refund:0,
			canGroup: 0,
			isGrouplm: 0,
			show_name: '1',
			show_btn: false,
			disabled: false,
			cgid:false,
			cgopid:0,
			newisGroup:0,
			newpt:0,
			newgid:0,
			shownewisGroup:false
		};
	},
	watch: {
		couponSelect(newVal) {
			this.getPrepay();
			this.getPrice();
		}
	},
	methods: {
		save() {
			let rgx = /^1[3456789]\d{9}$/;
			if (!this.defaultMember[0].name) {
				uni.showToast({
					title: '学员名不能为空',
					icon: 'none'
				});
			} else if (!(this.defaultMember[0].username || this.defaultMember[0].phone)) {
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
			} else if (!rgx.test(this.defaultMember[0].username || this.defaultMember[0].phone)) {
				uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				});
			} else {				
				this.$store
					.dispatch('apiAddMember', {
						name: this.defaultMember[0].name,
						phone: this.defaultMember[0].username,
						userId: this.userInfo.userId,
						birthday: '2015-01-01',
						sex: 0,
						type: 1
					})
					.then(res => {
						
						uni.showToast({
							title: '添加学员成功',
							icon: 'none'
						});
						this.getMember()						
					});
					setTimeout(this.postOrder(),200)					
			}
		},
		seletType(e) {
			if (this.confirmList[0].price < 0.05) {
				uni.showToast({
					title: '本次交易仅支持全款支付',
					icon: 'none'
				});
			} else {
				e = parseInt(e.currentTarget.dataset.type);
				if (this.isGroup != 0 && e == 0) {
					uni.showToast({
						title: '本次交易仅支持全款支付',
						icon: 'none'
					});
				} else if (this.confirmList[0].courseType == '1') {
					uni.showToast({
						title: '本次交易仅支持全款支付',
						icon: 'none'
					});
				} else if (this.isLm) {
					uni.showToast({
						title: '本次交易仅支持全款支付',
						icon: 'none'
					});
				}else if (this.cgid) {
					uni.showToast({
						title: '本次交易仅支持全款支付',
						icon: 'none'
					});
				}else if (this.newisGroup==1 || this.newisGroup==2 ) {
					uni.showToast({
						title: '本次交易仅支持全款支付',
						icon: 'none'
					});
				} else {
					this.payType = e;
				}
			}
		},
		toggleCoupon() {
			this.$refs.sctCoupon.toggle();
		},
		getMember() {
			this.$store
				.dispatch('apiGetMemberList', {
					userId: this.userInfo.userId,
					page_no: 1,
					page_size: 10
				})
				.then(res => {
					console.log(res);
					this.memberInfo = res.data.data.items;
					if(this.memberInfo[0]){
						this.defaultMember = res.data.data.items.filter(x => {
							return x.used == 1;
						});
					}
					
					if (this.defaultMember.length < 1) {
						this.defaultMember = [res.data.data.items[0]];
					}
					if (this.defaultMember[0].name == null) {
						this.show_name = '';
						this.show_btn = false;
						this.disabled = false;						
					} else {
						this.show_btn = true;
						this.disabled = true;						
					}
				});
		},
		getCoupon() {
			this.$store
				.dispatch('apiGetCanUserCoupon', {
					price: this.confirmList[0].price,
					userId: this.userInfo.userId
				})
				.then(res => {
					if (res.data.data.items.length > 0) {
						this.couponList = res.data.data.items;
						this.couponSelect = res.data.data.items.reduce(function(pre, curv) {
							return pre.coupon.discount < curv.coupon.discount ? curv : pre;
						});
					}
				});
		},
		getpostOrder() {
			if (!this.show_name) {
				this.save();
			} else {
				this.postOrder();
			}
		},
		postOrder() {
			uni.showLoading({
				title: '正在提交订单',
				mask: false
			});
			let _postData = {
				userId: this.userInfo.userId,//用户id
				memberId: this.memberInfo[this.memberIndex].id,//学员id
				courseId: this.confirmList[0].courseId || this.confirmList[0].id,//课程id
				payAll: this.payType, //付款的金额
				actId: this.actId//活动id
			};
			if (this.parentId != 0) {
				_postData.parentId = this.parentId;
			}
			if (this.isGroup == 1) {
				
				// 开团
				this.$store
					.dispatch('apiOpenGroup', {
						userId: this.userInfo.userId,
						activeId: this.acId,
						refund:this.refund						
					})
					.then(res => {
						
						_postData.groupId = res.data.data.id;
						this.$store.dispatch('apiPostOrder', _postData).then(OrderRes => {
							uni.hideLoading();
							let _idStr = OrderRes.data.data.join(',');//订单号						
							uni.redirectTo({
								url: '/pagesA/pay/pay?id=' + _idStr
							});
						});
					});
			} else if (this.isGroup == 2) {
				// 直接提交订单
				_postData.groupId = this.acId;
				// console.log(this.actId)
				this.$store.dispatch('apiPostOrder', _postData).then(OrderRes => {
					uni.hideLoading();
					let _idStr = OrderRes.data.data.join(',');
					uni.redirectTo({
						url: '/pagesA/pay/pay?id=' + _idStr
					});
				});
			} else if(this.newisGroup == 1) {
				// 开团
				this.$store
					.dispatch('openSpellGroup', {
						userId: this.userInfo.userId,
						activeId: this.newpt,
						refund:0
					})
					.then(res => {						
						console.log(res)
						console.log(res.data.data.id)
						_postData.groupId = res.data.data.id;											
						this.$store.dispatch('spellorder', _postData).then(OrderRes => {
							uni.hideLoading();
							let _idStr = OrderRes.data.data.join(',');//订单号						
							uni.redirectTo({
								url: '/pagesA/pay/pay?newid=' + _idStr
							});
						});
					});
			} else if (this.newisGroup == 2) {
				// 直接提交订单
				_postData.groupId = this.newgid;
				this.$store.dispatch('spellorder', _postData).then(OrderRes => {
					console.log(OrderRes)
					uni.hideLoading();
					let _idStr = OrderRes.data.data.join(',');
					uni.redirectTo({
						url: '/pagesA/pay/pay?newid=' + _idStr
					});
				});
			}else if (this.isZero) {
				// 零元购
				_postData.zeroId = this.zid;
				this.$store
					.dispatch('apiPostZeroOrder', _postData)
					.then(OrderRes => {
						uni.hideLoading();
						let _oNo = OrderRes.data.data[0];
						uni.redirectTo({
							url: '/pagesA/orderDt/orderDt?id=' + _oNo
						});
					})
					.catch(err => {
						uni.showToast({
							title: err.msg.toString(),
							icon: 'none'
						});
					});
			} else if (this.isLm) {
				// 联盟
				this.$store.dispatch('apiPostOrder', _postData).then(OrderRes => {
					this.$store.dispatch('apiPostLmNum', {
						id: uni.getStorageSync('lmAct').id,
						numsignup: 1
					});
					uni.hideLoading();
					let _idStr = OrderRes.data.data.join(',');
					uni.redirectTo({
						url: '/pagesA/pay/pay?id=' + _idStr + '&actId=' + this.actId
					});
				});
			} else if(this.cgid) {
				// 常规活动
				this.$store.dispatch('enterFor', {
					id:this.cgopid,
					userId:this.userInfo.userId,
					memberId:this.memberInfo[this.memberIndex].id
					
				}).then(OrderRes => {
					console.log(OrderRes.data.code)
					
					uni.hideLoading();
					if(OrderRes.data.code==4){
						uni.showModal({
							title: '友情提示',
							content: '该商品已售罄！',
							success: function(res) {
								if (res.confirm) {
								} else if (res.cancel) {
								}
							}
						});
					}else{
						let _idStr = OrderRes.data.data[0];
						uni.redirectTo({
							url: '/pagesA/pay/pay?cid=' + _idStr
						});
					}
					
				});
			}else {
				// 普通订单
				if (this.couponSelect) {
					let _arr = [];
					_arr.push(this.couponSelect.id);
					_postData.userCouponList = _arr;
				}
				this.$store.dispatch('apiPostOrder', _postData).then(OrderRes => {
					// console.log(OrderRes)
					uni.hideLoading();
					let _idStr = OrderRes.data.data.join(',');
					uni.redirectTo({
						url: '/pagesA/pay/pay?id=' + _idStr
					});
				});
			}
			
		},
		// 计算总预约金
		getPrepay() {
			let n = 0;
			if(this.shownewisGroup){
				this.confirmList.forEach(x => {
					n = n + x.spellPrice*0.1 || x.paymentPrice*0.1;
				});
			} else{
				this.confirmList.forEach(x => {
					n = n + x.prepay || x.paymentPrice*0.1;
				});
			}
			
			this.pricePre = n.toFixed(2);
		},
		// 计算总价
		getPrice() {
			let n = 0;
			if(this.shownewisGroup){
				this.confirmList.forEach(x => {
					n = n + x.spellPrice || x.paymentPrice;
				});
			} else{
				this.confirmList.forEach(x => {
					n = n + x.price || x.paymentPrice;
				});
			}
			
			if (this.couponSelect) {
				this.priceAll = (n - this.couponSelect.coupon.discount).toFixed(2);
			} else {
				this.priceAll = n.toFixed(2);
			}
		}
	},
	onLoad(cfm) {
		this.actId = cfm.actId;
		this.refund = cfm.refund
		this.cgopid = cfm.cgopid
		this.confirmList = uni.getStorageSync('confirmList');
		console.log(this.confirmList)
		if (cfm.isGroup == 1 || cfm.isGroup == 2) {
			this.isGroup = cfm.isGroup;
			this.payType = 1;
			this.acId = cfm.acId;
		}
		if(cfm.cgid == 1){
			this.payType = 1;
			this.cgid = true;
		}
		if(cfm.newisGroup == 1 || cfm.newisGroup == 2){
			this.payType = 1;
			this.shownewisGroup = true
			this.newisGroup = cfm.newisGroup;
			this.newpt = cfm.newpt;
			console.log(this.newpt)
			if(cfm.newgid){
				this.newgid = cfm.newgid
			}
			
		}
		if (cfm.isZero) {
			this.payType = 1;
			this.isZero = true;
			this.zid = cfm.zid;
		}
		if (cfm.isLm) {
			this.payType = 1;
			this.isLm = true;
		}
		if(cfm.newdandu == 1){
			this.payType = 1;
		}

		if (this.confirmList[0].price < 0.05 || this.confirmList[0].courseType == '1') {
			this.payType = 1;
		}
		if (cfm.isGroup == 1 || cfm.isGroup == 2 || cfm.isZero || cfm.isLm || cfm.cgid || cfm.newisGroup==1 || cfm.newisGroup==2 || cfm.newdandu == 1 ) {
			this.getPrepay();
			this.getPrice();
		} else {
			//优惠券
			this.getCoupon();
			// // 计算总预约金
			this.getPrepay();
			// 总价
			this.getPrice();
		}
		this.getMember();

		uni.$on('selectMember', payload => {
			this.memberIndex = payload.index;
			this.defaultMember = [this.memberInfo[payload.index]];
		});
		uni.$on('shureCoupon', payload => {
			this.couponSelect = payload;
		});
		uni.$on('shuaxin', payload => {
			this.getMember();
		});
	},
	// 下拉刷新
	onPullDownRefresh() {
		setTimeout(() => {
			this.getMember();
			this.getCoupon();
			this.getPrepay();
			this.getPrice();
			uni.stopPullDownRefresh();
		}, 1500);
	}
};
</script>

<style lang="less">
// @import "../../common/public.less";
page {
	background-color: #f6f6f6;
}

.lissBox {
	display: flex;
	flex-direction: column;
	padding: 18upx;

	.listRow {
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		background-color: #ffffff;
		border-radius: 10upx;
	}

	.studentBox {
		display: flex;
		flex-direction: column;
		// height: 320upx;
		height: 210upx;
		padding: 0 40upx 0 40upx;
		font-size: 32upx;
		color: #202932;
		.studentxinxi {
			height: 100rpx;
			line-height: 100rpx;
			// border-bottom: 1px solid #ccc;

			.iconfont {
				color: #c9c9c9;
				font-size: 40upx;
				font-weight: normal;
			}
			.xinxi {
				font-weight: bold;
			}
			.in_btn {
				height: 100%;
				line-height: 100rpx;
				text-align: end;
			}
		}

		.studentxinxi1 {
			display: flex;
			justify-content: space-between;
			
		}
		.studentxinxi2 {
			border-bottom: 1px solid #f6f6f6;
		}

		// image {
		// 	width: 48upx;
		// 	height: 48upx;
		// 	margin-right: 20upx;
		// }

		// .studentName {
		// 	margin-right: 20upx;
		// 	font-weight: bold;
		// }

		// .tel {
		// 	flex-grow: 1;
		// 	font-weight: bold;
		// }
	}
}
.carList {
	padding: 10upx 18upx 0upx 18upx;
	display: flex;
	flex-direction: column;

	.shopRow {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		background-color: #ffffff;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 20upx;
		margin-bottom: 24upx;

		.titleBox {
			padding: 24upx 40upx;
			display: flex;
			align-items: center;

			.icon-shoucangdianjia {
				color: #202932;
				font-size: 40upx;
				margin-right: 10upx;
			}

			.shopSelect {
				font-size: 44upx;
				margin-right: 40upx;
				color: #c3c3c3;
			}

			.icon-yuanxingxuanzhongfill {
				color: #ffcd11;
			}

			.shopName {
				font-size: 32rpx;
				font-weight: bold;
				color: #202932;
				flex: 1;
			}

			.icon-right {
				color: #9a9a9a;
				font-size: 32upx;
			}
		}
	}
}

.btmOp {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 180upx;
	// background-color: #FFFFFF;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	.payTypeBox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 75upx;
		background-color: #f8e4a9;
		font-size: 28upx;
		padding: 0 36upx;
		.yyBox {
			display: flex;
			align-items: center;
		}
		.iconfont {
			font-size: 40upx;
			color: #ff8f2c;
			font-weight: normal;
			margin-right: 6upx;
		}
		.typeText {
			color: #a17f68;
		}
		.price {
			font-size: 28upx;
			color: #ff3b2b;
		}
	}
	.btnBox {
		height: 105upx;
		display: flex;
		align-items: center;
		padding: 0 36upx;
		background-color: #ffffff;
		button {
			margin: 0;
			margin-left: 20upx;
			height: 80upx;
			line-height: 80upx;
			padding: 0 40upx;
			border-radius: 40upx;
			border: none;
			color: #ffffff;
			font-size: 32upx;
			font-weight: bold;
			background: linear-gradient(to right, #ff572a, #ff0d3f);
		}

		button:after {
			border: none;
			outline: none;
		}

		text {
			font-size: 28rpx;
			color: #202932;
		}

		.pirceAll {
			font-size: 42rpx;
			font-weight: bold;
			color: #ff3b2b;
			flex-grow: 1;
		}
	}
}
</style>
